<template>
  <a-modal modal-class="modal-form-large"
           title-align="start"
           :visible="visible"
           :title="title"
           :top="80"
           :align-center="false"
           :draggable="true"
           :mask-closable="false"
           :unmount-on-close="true"
           :ok-button-props="{ disabled: loading }"
           :cancel-button-props="{ disabled: loading }"
           @ok="handleOk"
           @cancel="handleCancel"
  >
    <a-form :model="formModel"
            ref="formRef"
            label-align="right"
            :auto-label-width="true"
            :rules="formRules"
    >
      <!-- 用户名 -->
      <a-form-item field="username" label="用户名">
        <a-input v-model="formModel.username"
                 placeholder="请输入用户名"
                 allow-clear/>
      </a-form-item>
      <!-- 花名 -->
      <a-form-item field="nickname" label="花名">
        <a-input v-model="formModel.nickname"
                 placeholder="请输入花名"
                 allow-clear/>
      </a-form-item>
      <!-- 密码 -->
      <a-form-item field="password"
                   label="密码">
        <a-input-password v-model="formModel.password"
                          placeholder="请输入密码"
                          allow-clear/>
      </a-form-item>
    </a-form>
  </a-modal>
</template>

<script lang="ts" setup>
import {ref, reactive} from 'vue';
import {useI18n} from 'vue-i18n';
import {Form, Message} from '@arco-design/web-vue';
import formRules from '../types/form.rules';
import {registerUser, type UserUpdateRequest} from '@/api/user/user';
import {md5} from '@/utils';
import useLoading from '@/hooks/loading';
import useVisible from "@/hooks/visible";

const {t} = useI18n();
const formRef = ref<InstanceType<typeof Form> | null>(null);
const title = ref<string>();
const {visible, setVisible} = useVisible();
const {loading, setLoading} = useLoading();
const defaultForm = (): UserUpdateRequest => {
  return {
    id: undefined,
    username: '',
    password: '',
    nickname: '',
  };
};
const formModel = ref<UserUpdateRequest>({});

// 打开模态框
const open = () => {
  visible.value = true;
  renderForm({ ...defaultForm() });
  title.value = '注册';
  setVisible(true)
};

// 渲染表单
const renderForm = (record: any) => {
  formModel.value = Object.assign({}, record);
};

// 关闭模态框
const handleSubmit = async () => {
  // 检查 formRef.value 是否存在
  if (formRef.value) {
    await formRef.value.validate();
  }
};

// 确定按钮点击事件
const handleOk = async () => {
  setLoading(true);
  try {
    // 验证参数
    await formRef.value?.validate();
    // 发起注册请求
    await registerUser({
      ...formModel.value,
      // 检查 password 是否为 undefined
      password: md5(formModel.value.password as string),
    });
    Message.success(t('register.success'));
    visible.value = false;
  } catch (e) {
    Message.error(t('register.failed'));
    return false;
  } finally {
    setLoading(false);
  }
};

// 取消按钮点击事件
const handleCancel = () => {
  visible.value = false;
};

defineExpose({
  open,
});
</script>

<style scoped>
/* 可根据需要添加样式 */
</style>